<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{ $t("projectProcess.add.queryCriteria") }}</span></el-col>
      </el-row>
      <el-form :inline="true" style="padding: 0px 20px">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{ $t("projectProcess.index.templateName") }}</div>
              <el-input v-model="listQuery.templateName" :placeholder="$t('placeholder.name')" clearable class="filter-item"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{ $t("projectProcess.index.createName") }}</div>
              <el-input v-model="listQuery.createName" :placeholder="$t('placeholder.name')" clearable class="filter-item"></el-input>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 33px;">
            <div class="yt-btn yt-btn-ys" type="primary" @click="handleFilter">{{ $t("button.search") }}</div>
            <div class="yt-btn yt-ml8" type="primary" @click="reset">{{ $t("button.reset") }}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{ $t("projectProcess.index.projectList") }}</span></el-col>
      </el-row>
      <el-row class="list-operation">
        <el-col>
          <div class="yt-btn yt-btn-ys" style="background: #32bc8e;border: 1px solid #32bc8e;color: #fff;" type="primary" @click="NewTemplate">{{ $t("button.new") }}</div>
        </el-col>
      </el-row>

      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border v-loading.body="listLoading" fit highlight-current-row class="yt-table">
        <el-table-column align="center" type="selection" width="55" class-name="pd"/>
        <el-table-column align="center" type="index" :label="$t('projectProcess.index.serialNumber')" width="50" class-name="pd"/>
        <el-table-column align="center" :label="$t('projectProcess.index.templateName')">
          <template slot-scope="scope">
            <div style="text-decoration: underline;color: #6dcaa8;cursor: pointer;" type="primary" @click="handlePreserve(scope.row)">{{ scope.row.templateName }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('projectProcess.index.systemTypeName')" prop="systemTypeName" class-name="pd"/>
        <el-table-column align="center" :label="$t('projectProcess.index.createName')" prop="createName" class-name="pd"/>
        <el-table-column align="center" :label="$t('projectProcess.index.createTime')" prop="createTime" class-name="pd"/>
        <el-table-column align="center" :label="$t('projectProcess.index.updateName')" prop="updateName" class-name="pd"/>
        <el-table-column align="center" :label="$t('projectProcess.index.updateTime')" prop="updateTime" class-name="pd"/>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import formatter from '@/utils/formatter';
  import { query } from '@/api/e-formula/projectProcess';

  export default {
    name: 'projectProcess',
    data() {
      return {
        formatter,
        listAll: this.$store.getters.allDic,
        listMapAll: this.$store.getters.allMapDic,
        list: null,
        total: null,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          createName: '',
          templateName: ''
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      handlePreserve(val) {
        this.$router.push({ path: '/baseManager/projectProcessAdd', query: { id: val.id } });
        console.log(val);
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {};
        this.getList();
      },
      getList() {
        this.listLoading = true;
        const { page, limit, createName, templateName } = this.listQuery;
        query(page, limit, createName, templateName).then(response => {
          if (response.status === 200) {
            this.list = response.data.data.rows;
            this.list.forEach(x => {
              x.systemTypeName = this.listMapAll.systemType[x.systemType];
            });
            this.total = response.data.data.total;

            this.listLoading = false;
          }
        });
      },
      // 新增模板
      NewTemplate() {
        this.$router.push({ name: '维护模板', params: { id: '123' } });
      }
    }
  };
</script>
